<template>
  <div>
    <div class="pageTitleWhole">
      <div style="color:#1890FF;float:left;margin-right:15px;cursor:pointer">
        <router-link :to="`/dataBI/jcReceivableReport?f=1`">
          <a-icon type="left" />返回
        </router-link>
      </div>
      <a-breadcrumb :routes="routes">
        <template slot="itemRender" slot-scope="{ route, routes, paths }">
          <span v-if="routes.indexOf(route) === routes.length - 1">{{ route.breadcrumbName }}</span>
          <router-link v-else :to="`${basePath}/${paths.join('/')}`">{{ route.breadcrumbName }}</router-link>
        </template>
      </a-breadcrumb>
    </div>
    <div id="takeoutMain">
      <a-radio-group
        v-model="chosenType"
        @change="radioChange"
        button-style="solid"
        size="large"
        style="margin-bottom:20px"
      >
        <a-radio-button :value="1">未对账</a-radio-button>
        <a-radio-button :value="2">已对账</a-radio-button>
      </a-radio-group>
      <template v-if="chosenType === 1">
        <a-form layout="inline" :model="form1" style="margin-top:0px;">
          <a-form-item label="船名">
            <a-select v-model="form1.shipId" style="width:200px;">
              <a-select-option value>全部</a-select-option>
              <a-select-option
                v-for="(item,index) in shipNameList"
                :key="index"
                :value="item.id"
              >{{item.name}}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="航次">
            <a-input v-model="form1.voyageNumberLike" />
          </a-form-item>
          <a-form-item label="选择费用类型">
            <a-select
              style="width:180px"
              show-search
              :show-arrow="false"
              :filter-option="false"
              :default-active-first-option="false"
              :not-found-content="null"
              v-model="form1.feeTypeId"
              @search="feeListChange"
              @blur="restFeeList"
            >
              <a-select-option value>全部</a-select-option>
              <a-select-option v-for="(v,k) in feeList" :key="k" :value="v.id">{{v.name}}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-input-group compact>
              <a-select v-model="form1.dateSearchType" style="width:130px">
                <a-select-option :value="1">航次起航日期</a-select-option>
                <a-select-option :value="2">费用产生日期</a-select-option>
              </a-select>
              <a-range-picker @change="timeChange1" :value="timeValue1" style="width:300px">
                <a-icon slot="suffixIcon" type="calendar" />
              </a-range-picker>
            </a-input-group>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="check">查询</a-button>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="excelExport">导出Excel</a-button>
          </a-form-item>
        </a-form>
        <a-table
          :columns="columns1"
          :loading="loading"
          :data-source="data1"
          style="margin-top:25px;"
          :pagination="pagination"
          :row-key="(record,index) => index"
        >
          <span slot="company" slot-scope="text, record">
            <a v-if="record.voyageNumber" @click="orderDetail(record)">{{record.voyageNumber}}</a>
            <span v-else>--</span>
          </span>
          <template slot="money" slot-scope="text, record">
            <span
              :style="record.currencyType === 'CNY' ? '': 'color:orange'"
            >{{record.currencyType === 'CNY' ? record.receivableAmount.toFixed(2) : `$${record.receivableAmount.toFixed(2)}`}}</span>
          </template>
        </a-table>
      </template>

      <template v-else-if="chosenType === 2">
        <a-form layout="inline" :model="form2" style="margin-top:0px;">
          <a-form-item label="对账单编号">
            <a-input v-model="form2.billCodeLike" />
          </a-form-item>
          <a-form-item label="对账日期">
            <a-range-picker @change="timeChange2" :value="timeValue2" style="width:250px">
              <a-icon slot="suffixIcon" type="calendar" />
            </a-range-picker>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="check">查询</a-button>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="excelExport">导出Excel</a-button>
          </a-form-item>
        </a-form>
        <a-table
          :columns="columns2"
          :loading="loading"
          :data-source="data2"
          style="margin-top:25px;"
          :pagination="pagination"
          :row-key="(record,index) => index"
        >
          <span slot="company" slot-scope="text, record">
            <a v-if="record.billCode" @click="billDetail(record)">{{record.billCode}}</a>
            <span v-else>--</span>
          </span>
        </a-table>
      </template>
    </div>
  </div>
</template>
<script>
import store from 'store'
import { queryFeeTypeList, queryShipNameList } from '@/api'
import { jcQueryNoCheckReceivableReportDetailList, jcQueryCheckedReceivableReportDetailList } from '@/api/dataBI'
import { commonExport } from '@/api/request'
import _ from 'lodash/debounce'
const columns1 = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '船名',
    dataIndex: 'shipName'
  },
  {
    title: '航次',
    dataIndex: 'voyageNumber',
    scopedSlots: {
      customRender: 'company'
    }
  },
  {
    title: '费用类型',
    dataIndex: 'feeName'
  },
  {
    title: '应收金额（元）',
    dataIndex: 'receivableAmount',
    scopedSlots: {
      customRender: 'money'
    }
  },
  {
    title: '航次起航日期',
    dataIndex: 'departureDate',
    customRender: (text, record, index) => {
      return record.departureDate || '--'
    }
  },
  {
    title: '费用产生日期',
    dataIndex: 'costDate',
    customRender: (text, record, index) => {
      return record.costDate || '--'
    }
  }
]
const columns2 = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '对账单编号',
    dataIndex: 'billCode',
    scopedSlots: {
      customRender: 'company'
    }
  },
  {
    title: '对账日期',
    dataIndex: 'createDate',
    customRender: (text, record, index) => {
      return record.createDate || '--'
    }
  },
  {
    title: '应收总金额（元）',
    dataIndex: 'totalAmount',
    customRender: (text, record, index) => {
      return record.totalAmount || '--'
    }
  },
  {
    title: '已收总金额（元）',
    dataIndex: 'alreadyAmount',
    customRender: (text, record, index) => {
      return record.alreadyAmount || '--'
    }
  },
  {
    title: '未收总金额（元）',
    dataIndex: 'remainingAmount',
    customRender: (text, record, index) => {
      return record.remainingAmount || '--'
    }
  }
]
export default {
  props: ['id'],
  data () {
    this.feeListChange = _(this.feeListChange, 800)
    return {
      chosenType: 1,
      shipNameList: [],
      basePath: '/dataBI',
      routes: [
        {
          path: '/jcReceivableReport',
          breadcrumbName: '应收报表'
        },
        {
          path: '',
          breadcrumbName: '详情'
        }
      ],
      form1: {
        startDate: '',
        endDate: '',
        startMonth: '',
        endMonth: '',
        shipId: '',
        voyageNumberLike: '',
        feeTypeId: '',
        dateSearchType: 1,
        currencyType: ''
      },
      timeValue1: [],
      form2: {
        startDate: '',
        endDate: '',
        startMonth: '',
        endMonth: '',
        custId: '',
        billCodeLike: '',
        currencyType: ''
      },
      timeValue2: [],
      pageNum: 1,
      pageSize: 10,
      loading: true,
      data1: [],
      data2: [],
      columns1,
      columns2,
      pagination: {},
      feeList: []
    }
  },
  methods: {
    shipNameListRequest (e) {
      queryShipNameList(e)
        .then(res => {
          this.shipNameList = res.data
        })
        .catch(rs => {})
    },
    containerListRequest (e) {
      this.loading = true
      jcQueryNoCheckReceivableReportDetailList(e)
        .then(res => {
          this.data1 = res.data.list
          let currentPage = this.pageNum
          this.pagination = {
            current: currentPage,
            pageSize: res.data.pageSize,
            total: res.data.total,
            showQuickJumper: false,
            showSizeChanger: true,
            showTotal: total =>
              `共${total}条记录 第${currentPage}/${res.data.pages}页`,
            onChange: pageNum => {
              this.pageNum = pageNum
              let paramData = {
                ...this.form1,
                pageSize: this.pageSize,
                pageNum: this.pageNum
              }
              this.containerListRequest(paramData)
            },
            onShowSizeChange: (current, size) => {
              this.pageNum = current
              this.pageSize = size
              let paramData = {
                ...this.form1,
                pageSize: this.pageSize,
                pageNum: this.pageNum
              }
              this.containerListRequest(paramData)
            }
          }
          this.loading = false
        })
    },
    containerListRequest2 (e) {
      this.loading = true
      jcQueryCheckedReceivableReportDetailList(e)
        .then(res => {
          this.data2 = res.data.list
          let currentPage = this.pageNum
          this.pagination = {
            current: currentPage,
            pageSize: res.data.pageSize,
            total: res.data.total,
            showQuickJumper: false,
            showSizeChanger: true,
            showTotal: total =>
              `共${total}条记录 第${currentPage}/${res.data.pages}页`,
            onChange: pageNum => {
              this.pageNum = pageNum
              let paramData = {
                ...this.form2,
                pageSize: this.pageSize,
                pageNum: this.pageNum
              }
              this.containerListRequest2(paramData)
            },
            onShowSizeChange: (current, size) => {
              this.pageNum = current
              this.pageSize = size
              let paramData = {
                ...this.form2,
                pageSize: this.pageSize,
                pageNum: this.pageNum
              }
              this.containerListRequest2(paramData)
            }
          }
          this.loading = false
        })
    },
    feeTypeRequest (e) {
      queryFeeTypeList(e)
        .then(res => {
          this.feeList = res.data
        })
    },
    check () {
      this.pageNum = 1
      if (this.chosenType === 1) {
        this.containerListRequest({
          ...this.form1,
          pageNum: this.pageNum,
          pageSize: this.pageSize
        })
      } else if (this.chosenType === 2) {
        this.containerListRequest2({
          ...this.form2,
          pageNum: this.pageNum,
          pageSize: this.pageSize
        })
      }
    },
    excelExport () {
      if (this.chosenType === 1) {
        const newColumns = [
          {
            title: '船名',
            dataIndex: 'shipName'
          },
          {
            title: '航次',
            dataIndex: 'voyageNumber'
          },
          {
            title: '费用类型',
            dataIndex: 'feeName'
          },
          {
            title: '应收金额（元）',
            dataIndex: 'receivableAmount'
          },
          {
            title: '航次起航日期',
            dataIndex: 'departureDate'
          },
          {
            title: '费用产生日期',
            dataIndex: 'costDate'
          },
          {
            title: '币种',
            dataIndex: 'currencyType'
          }
        ]
        commonExport('shipReport/exportNoCheckReceivableReportDetailList', {
          ...this.form1,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          columns: newColumns
        })
      } else if (this.chosenType === 2) {
        const newColumns2 = [
          {
            title: '对账单编号',
            dataIndex: 'billCode'
          },
          {
            title: '对账日期',
            dataIndex: 'createDate'
          },
          {
            title: '应收总金额（元）',
            dataIndex: 'totalAmount'
          },
          {
            title: '已收总金额（元）',
            dataIndex: 'alreadyAmount'
          },
          {
            title: '未收总金额（元）',
            dataIndex: 'remainingAmount'
          },
          {
            title: '币种',
            dataIndex: 'currencyType'
          }
        ]
        commonExport('shipReport/exportCheckedReceivableReportDetailList', {
          ...this.form2,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          columns: newColumns2
        })
      }
    },
    radioChange (e) {
      this.chosenType = e.target.value
      this.pageSize = 10
      this.check()
    },
    feeListChange (e) {
      this.feeTypeRequest({
        nameLike: e,
        status: 1,
        belongCompany: 'JIA_HUA',
        feeType: 1
      })
    },
    restFeeList () {
      this.feeTypeRequest({
        status: 1,
        belongCompany: 'JIA_HUA',
        feeType: 1
      })
    },
    orderDetail (e) {
      window.open(`/shipCenter/voyageManagement/detail/${e.voyageId}`, '_blank')
    },
    timeChange1 (date, dateStr) {
      this.timeValue1 = date
      this.form1.startDate = dateStr[0]
      this.form1.endDate = dateStr[1]
    },
    timeChange2 (date, dateStr) {
      this.timeValue2 = date
      this.form2.startDate = dateStr[0]
      this.form2.endDate = dateStr[1]
    },
    billDetail (e) {
      window.open(`/financialCenter/receivableBillOfChuang/${e.billId}?status=2`, '_blank')
    }
  },
  mounted () {
    let startMonth = store.get('jcStartDate')
    let endMonth = store.get('jcEndDate')
    let currencyType = store.get('jcCurrencyType')
    this.form1.custId = this.id
    this.form1.startMonth = startMonth
    this.form1.endMonth = endMonth
    this.form1.currencyType = currencyType
    this.form2.custId = this.id
    this.form2.startMonth = startMonth
    this.form2.endMonth = endMonth
    this.form2.currencyType = currencyType
    this.shipNameListRequest({})
    this.restFeeList()
    this.containerListRequest({
      ...this.form1,
      pageNum: this.pageNum,
      pageSize: this.pageSize
    })
  }
}
</script>

<style lang="less" scoped>
#takeoutMain {
  padding: 24px;
  margin: 24px;
  background: #fff;
  min-height: 700px;
}
</style>
